// import type React from "react";
// import { Input, List } from "antd";
// import { useState, useTransition } from "react";

// const Ces: React.FC = () => {
//   const [inputvalue, setInputValue] = useState<string>("");
//   const [list, setList] = useState<ListItem[]>([]);
//   const [isPending, startTransition] = useTransition();
//   interface ListItem {
//     id: string;
//     name: string;
//     age: number;
//     sex: string;
//     address: string;
//   }
//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     console.log(e.target.value);
//     setInputValue(e.target.value);

//     fetch(`/api/mock/list?key=${e.target.value}`)
//       .then((res) => res.json())
//       .then((res) => {
//         // console.log(res);
//         setList(res.list);

//         // startTransition(() => {
//         //   setList(res.list);
//         // });
//       });
//   };
//   return (
//     <>
//       <Input value={inputvalue} onChange={handleChange} />
//       <List
//         bordered
//         dataSource={list}
//         renderItem={(item) => <List.Item>{item.address}</List.Item>}
//       ></List>
//       {/* {isPending ? (
//         <div>Loading...</div>
//       ) : (
//         <List
//           bordered
//           dataSource={list}
//           renderItem={(item) => <List.Item>{item.address}</List.Item>}
//         ></List>
//       )} */}
//     </>
//   );
// };
// export default Ces;

// import type React from "react";
// import { Input, List } from "antd";
// import { useDeferredValue, useState } from "react";
// import mockjs from "mockjs";

// const Ces: React.FC = () => {
//   const [inputvalue, setInputValue] = useState<string>("");
//   const [list, setList] = useState<ListItem[]>(() => {
//     return mockjs.mock({
//       "list|100": [
//         {
//           id: "@guid",
//           name: "@cname",
//           age: "@integer(18, 30)",
//           sex: "@boolean",
//           address: "@county(true)",
//         },
//       ],
//     }).list;
//   });
//   interface ListItem {
//     id: string;
//     name: string;
//     age: number;
//     sex: string;
//     address: string;
//   }

//   const inputvalueDeferred = useDeferredValue(inputvalue);
//   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
//     console.log(e.target.value);
//     setInputValue(e.target.value);
//   };

//   const findName = () => {
//     return list.filter((item) => item.name.includes(inputvalueDeferred));
//   };
//   const isSame = () => {
//     return inputvalueDeferred === inputvalue;
//   };

//   return (
//     <>
//       <Input value={inputvalue} onChange={handleChange} />
//       <List
//       style={ {opacity: isSame() ? 1 : 0.5,transition : 'opacity 0.5s ease-in-out'}}
//         bordered
//         dataSource={findName()}
//         renderItem={(item) => (
//           <List.Item>
//             {item.name}
//             <br />
//             {item.address}
//           </List.Item>
//         )}
//       ></List>
//     </>
//   );
// };
// export default Ces;

// import React, { useRef } from "react";

// const Ces: React.FC = () => {
//   const domRef = useRef<HTMLDivElement>(null);
//   //null 表示一个空对象
//   //undefined obj  obj.a的a 没有定义 就为undefined
//   const handleClick = () => {
//     console.dir(domRef.current);
//     domRef.current!.style.color = "red";
//   };
//   return (
//     <>
//       <div>AAA</div>
//       <div>BBB</div>
//       <div ref={domRef}>CCC</div>
//       <button onClick={handleClick}>获取</button>
//     </>
//   );
// };

// export default Ces;

// import React, { useRef, useState } from "react";

// const Ces: React.FC = () => {
//   let timer = useRef(null);
//   const domRef = useRef<HTMLDivElement>(null);
//   const [count, setCount] = useState(0);

//   const start = () => {
//     timer.current = setInterval(() => {
//       setCount((prev) => prev + 1);
//     }, 1000);
//   };

//   const end = () => {
//     clearInterval(timer.current);
//     // useState 每次渲染都会重新创建Ces这个组件  timer初始化
//     //  let timer = null;放在组件外  解决
//     // timer = useRef(null);
//   };
//   const handleClick = () => {};

//   return (
//     <>
//       <div>计时器场景</div>
//       <div ref={domRef}>{count}</div>
//       <button onClick={start}>开始</button>
//       <button onClick={end}>结束</button>
//     </>
//   );
// };

// export default Ces;

// import React, { useImperativeHandle, useRef, useState } from "react";
// interface ForwardRef {
//   vaidator: () => boolean;
//   resetForm: () => void;
// }
// const Son = React.forwardRef<ForwardRef>((props, ref) => {
//   const [form, setForm] = useState({
//     name: "",
//     password: "",
//   });

//   const vaidator = () => {
//     console.log(form);

//     if (form.name.length === 0) {
//       return false;
//     }
//     if (form.password.length === 0) {
//       return false;
//     }
//     return true;
//   };
//   const resetForm = () => {
//     setForm({
//       name: "",
//       password: "",
//     });
//   };
//   useImperativeHandle(ref, () => ({
//     vaidator,
//     resetForm,
//   }));

//   return (
//     <div>
//       <form>
//         <input
//           type="text"
//           value={form.name}
//           onChange={(e) => {
//             console.log(e.target.value, "33");

//             setForm({
//               ...form,
//               name: e.target.value,
//             });
//           }}
//         />
//         <input
//           type="password"
//           value={form.password}
//           onChange={(e) => {
//             setForm({
//               ...form,
//               password: e.target.value,
//             });
//           }}
//         />
//       </form>
//     </div>
//   );
// });
// const Ces: React.FC = () => {
//   interface ChildRef {
//   vaidator: () => boolean;
//   resetForm: () => void;
// }
//   const childRef = useRef<ChildRef>(null);

//   const handlevaidator = () => {
//     console.log(childRef.current!.vaidator());
//   };
//   const handlereset = () => {
//     childRef.current!.resetForm();
//   };
//   return (
//     <>
//       <div>我是父组件</div>
//       <button onClick={handlevaidator}>校验</button>
//       <button onClick={handlereset}>重置</button>
//       <Son ref={childRef} />
//     </>
//   );
// };

// export default Ces;

import React, { useState } from "react";
interface ThemeContextType {
  theme: string;
}
const ThemeContext = React.createContext<ThemeContextType>({
  theme: "light",
});
const Sonson = () => {
  const { theme } = React.useContext<ThemeContextType>(ThemeContext);
  console.log(theme, "sonson");
  const lightStyle = {
    color: "white",
    backgroundColor: "black",
  };
  const darkStyle = {
    color: "black",
    backgroundColor: "white",
  };

  return <div style={theme === "light" ? lightStyle : darkStyle}>sonson</div>;
};
const Son = () => {
  const { theme } = React.useContext<ThemeContextType>(ThemeContext);
  console.log(theme, "son");
  const lightStyle = {
    color: "white",
    backgroundColor: "black",
  };
  const darkStyle = {
    color: "black",
    backgroundColor: "white",
  };

  return (
    <div>
      <div style={theme === "light" ? lightStyle : darkStyle}>son</div>
      <Sonson />
    </div>
  );
};

const Ces: React.FC = () => {
  const [theme, setTheme] = useState("light");
  const handleClick = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };
  return (
    <>
      <ThemeContext.Provider value={{a:'11', theme }}>
        <ThemeContext.Provider value={{a:'22', theme }}>
          <button onClick={handleClick}>换肤</button>
          <Son />
        </ThemeContext.Provider>
      </ThemeContext.Provider>
    </>
  );
};

export default Ces;
